<script lang="ts" setup>
import { CloseOutlined } from '@ant-design/icons-vue';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import { putSysMessageIdApi, deleteSysMessageIdApi } from '@/common/apis/notice'
import { ref } from 'vue';
import { message } from 'ant-design-vue';

const props = defineProps({
    item: {
        type: Object,
        request: true
    },
    fetchData: {
        type: Function,
        required: true,
    },
})

const typeMap = {
    1: { text: '通知', color: '#7bca54' },
    2: { text: '提示', color: '#9d9399' },
    3: { text: '重要', color: '#efb43c' },
    4: { text: '紧急', color: '#f67777' },
}

// 删除信息
const deleteNotice = async (id: number) => {
    // 调用删除接口
    await deleteSysMessageIdApi(id)
    // 刷新数据
    props.fetchData()
    message.success('删除成功')
}

// 点击的标记已读
const handleIconClick = async (id: number) => {
    // 调用接口
    await putSysMessageIdApi(id)
    // 刷新数据
    props.fetchData()
    message.success('标记成功')
}

// 设置按钮大小
const size = ref<SizeType>('small');
// 设置间距
const sizeSpace = ref(8);

</script>

<template>
    <div class="notice">
        <!-- 内容 -->
        <div class="notice-title">
            <div class="notice-title-content">
                <a-space :size="sizeSpace">
                    <a-button :size="size" :style="{ backgroundColor: typeMap[item?.type]?.color }">{{
                        typeMap[item?.type]?.text }}</a-button>
                    <h4>{{ props.item?.content }}</h4>
                </a-space>
            </div>
            <!-- 删除信息 -->
            <div class="notice-title-button" @click="deleteNotice(props.item?.id)">
                <CloseOutlined />
            </div>
        </div>
        <!-- 发送人  -->
        <div class="notice-sender">
            <a-tooltip placement="bottomLeft">
                <template #title>
                    <span>标记为已读</span>
                </template>
                <!-- slot 标记已读 -->
                <div class="notice-sender-button" @click="handleIconClick(props.item?.id)">
                    <slot>
                    </slot>
                </div>
            </a-tooltip>
            <p>发送人：{{ props.item?.sendUser.username }}</p>
        </div>
        <!-- 时间 -->
        <div class="notice-time">
            {{ props.item?.update_time }}
        </div>
    </div>
</template>

<style lang="scss" scoped>
.notice {
    width: 100%;
    height: 130px;
    padding: 10px;
    margin: 10px 0px;
    /* 阴影 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // 内容
    &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-content {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &-button {
            cursor: pointer;
        }
    }

    // 发送人
    &-sender {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        &-button {
            cursor: pointer;
        }
    }

    // 发布时间
    &-time {
        display: flex;
        justify-content: flex-end;
    }
}
</style>